<template>
	<div>
		<div class="snow-container">
			<div class="snow foreground"></div>
			<div class="snow foreground layered"></div>
			<div class="snow middleground"></div>
			<div class="snow middleground layered"></div>
			<div class="snow background"></div>
			<div class="snow background layered"></div>
		</div>
		<div class="top-buttons-agileinfo" style="height: 140px;">
			<!-- <router-link :to="{path:'/login'}" class="active">登录</router-link>
			<router-link :to="{path:'/register'}">注册</router-link> -->
		</div>
		<div >
			<h1 style="color: #0F6674; padding: 40px;">水果商城</h1>
			<div class="main-agileits">
				<div class="form-w3-agile">
					<h2 class="sub-agileits-w3layouts">登录</h2>
					<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" type="text" name="Text" placeholder="用户名" id="username"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" @keyup.enter.native="login" type="password" name="Password" placeholder="密码"
							 id="password"></el-input>
						</el-form-item>
						<div class="submit-w3l">
							<el-form-item>
								<el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
							</el-form-item>
						</div>
						<!-- <p class="p-bottom-w3ls">还没有帐户---<router-link :to="{path:'/register'}">点击注册</router-link>
						</p> -->
					</el-form>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				// 登录表单的数据绑定对象
				loginForm: {
					username: '',
					password: ''
				},
				// 登录表单的验证规则
				loginFormRules: {
					// 验证用户名是否合法
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 16,
							message: '长度在 2 到 16 个字符',
							trigger: 'blur'
						}
					],
					// 验证密码是否合法
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 18,
							message: '长度在 6 到 18 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			// 登录前先验证表单输入框的值是否合法
			login() {
				this.$refs.loginFormRef.validate(async valid => {
					if (!valid) return;
					const {
						data: res
					} = await this.$axios.post("http://localhost:8080/mall/members/login", this.loginForm);
					if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
					this.$message.success(res.meta.msg);
					// console.log(res);
					//将登陆成功之后的token保存到客户端的sessionStorage
					window.sessionStorage.setItem("token", res.data.token);
					// window.sessionStorage.setItem("info", res.meta.message);
					window.sessionStorage.setItem("username", res.meta.message.username);
					window.sessionStorage.setItem("id", res.meta.message.id);
					window.sessionStorage.setItem("nickname", res.meta.message.nickname);
					window.sessionStorage.setItem("tel", res.meta.message.tel);
					window.sessionStorage.setItem("email", res.meta.message.email);
					window.sessionStorage.setItem("description", res.meta.message.description);
					window.sessionStorage.setItem("url", res.meta.message.file);
					//通过编程式导航跳转到后台主页
					// console.log(window.sessionStorage);
					// this.$router.push("/home");
					if(this.$route.query.redirect == ""){
						this.$router.push(this.$route.query.redirect || '/')
					}else{
						this.$router.go(-1)
					}
					
				})
			}
		}
	}
</script>

<style scoped="scoped">
	@import url("../../assets/login_snow.css");

	/* @import url("../assets/login_style.css"); */
	body {
		font-family: 'Open Sans', sans-serif;
		width: 100%;
		text-transform: uppercase;
		background: #fff;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		text-align: center;
	}

	.main-agileits {
		width: 42%;
		margin: 0 auto;
		height: 470px;
		
	}
	.form-w3-agile {
		background: rgba(41, 39, 39, 0.46);
		-webkit-box-shadow: 0px 35px 44px -22px rgba(0, 0, 0, 0.72);
		-moz-box-shadow: 0px 35px 44px -22px rgba(0, 0, 0, 0.72);
		box-shadow: 0px 35px 44px -22px #1f181b;
		padding: 60px 40px;
		/* height: 468px; */
	}
	h1 {
		text-align: center;
		font-size: 33px;
		font-weight: bold;
		margin: 10px 0 25px 0;
		color: #ffffff;
		letter-spacing: 2px;
		word-spacing: 4px;
	}

	h2.sub-agileits-w3layouts,
	h3.sub-agileits-w3layouts {
		color: #fff;
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		margin-bottom: 2em;
		letter-spacing: 2px;
	}
</style>
